<template>
  <div class="home">
    <!-- 布局容器 -->
    <el-container>
      <el-header>
        <HeaderBar style="position: fixed" />
      </el-header>
      <!-- 内容中心展示容器 通过路由展示其中的内容 -->
      <el-main id="main">
        <!--首页只留一个router-view就行了，HomeView会包装轮播图和菜单条-->
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </el-main>
      <el-footer id="footer" style="height: 0">
        <FooterBar v-if="!$route.meta.hideFooter" />
      </el-footer>
    </el-container>
    <el-backtop
      style="color: black; width: 50px; height: 50px"
      :right="100"
      :bottom="100"
    />
  </div>
</template>

<script setup lang="ts">
// 导入组件
import HeaderBar from "@/components/home/HeaderBar.vue";
import FooterBar from "@/components/home/FooterBar.vue";
// 引入样式表
import "./style/reset_style.css";
import "./style/base.css";
import "@/style/font.css"
</script>
<style scoped>

body {
  font-family: my_font;

}

.home {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*#app {*/
/*  font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  width: 100%;*/
/*  overflow-x: hidden;*/
/*  -webkit-overflow-x: hidden;*/
/*  color: #444;*/
/*}*/

/*.el-container {*/
/*  width: 100%;*/
/*  min-height: 100%;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  justify-content: space-between;*/
/*}*/

#main {
  /* min-height: 1500px; */
  padding: 0;
}

#footer {
  padding: 0;
}

#main.fade-enter {
  visibility: hidden;
  opacity: 0;
}

#main.fade-leave-to {
  display: none;
}

#main.fade-leave-active {
  transition: opacity 0.2s ease;
}

#main.fade-leave {
  visibility: visible;
  opacity: 1;
}
</style>
